<!doctype html>
<html lang="zh-CN">
  <head>
    <!-- 必须的 meta 标签 -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <title>Hello, world!</title>
      <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
      <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
      <script src="http://cache.amap.com/lbs/static/es5.min.js"></script>
      <script src="http://webapi.amap.com/maps?v=1.3&key=e09c9105579f5593a9f68cb651e3fcd9"></script>
      <script type="text/javascript" src="http://cache.amap.com/lbs/static/addToolbar.js"></script>
      <script src="https://webapi.amap.com/js/marker.js"></script>
      <script src="https://a.amap.com/jsapi_demos/static/demo-center/js/demoutils.js"></script>
      <script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=e09c9105579f5593a9f68cb651e3fcd9&plugin=AMap.Driving"></script>
      <style type="text/css">
          *{margin:0; padding:0;}
          html,body,.warpper{height:100%; min-width:1190px;}
          body{overflow: auto;}
          .wrapper{position: relative;}
          .top,.footer{width:100%;height:60px;max-height: 60px; background: #343a40;}
          .center{width:100%;height:auto;position: absolute; top:60px; bottom:60px; background: #ffffff;overflow: auto;}
          .footer{position:absolute; bottom:0;}
          .left{margin-left: 5px;margin-right:5px;width:400px;min-width:400px;max-width: 400px; height:100%; background: #efefef; float:left;overflow: auto}
          .main{margin-left: 5px;margin-right:5px;overflow: hidden;height:100%; background: #eeeeee;overflow: auto}
          .info-set-title{font-family: 等线;font-size: 15px;font-weight: 500;color: #1f1f1f}
          .info-set{margin-left: 5px;}
          .info-set-sub-title{margin-top:10px;margin-left:40px;font-family: 等线;font-size: 15px;font-weight: 500;}
          .gap{width: auto;height: 30px;}
          h1{margin-left: 5px;font-family: 等线;font-size: 25px;font-weight: 500;color: #1f1f1f}
          .input-number-div{margin-top: 10px;margin-left: 20px}
          .input-number-r{margin-top: 10px;margin-left: 20px}
          .input-number{border:1px solid;border-radius:2px;margin-left: 20px;margin-right: 40px;width: 100px;height: 20px;}
          #map{margin-left: 20px;margin-right: 20px;margin-top: 20px;margin-bottom: 20px;width: auto;height: auto;background-color: #ffffff;}
          #output{margin-left: 20px;margin-right: 20px;margin-top: 20px;width: auto;height: 600px;background-color: #db3434}
          #start-analyze{margin-left: 30px;width: 300px;height: 50px;margin-bottom:60px;background-color: aliceblue;border: 2px greenyellow;}
          #panel {position: fixed;background-color: white;max-height: 90%;overflow-y: auto;top: 10px;right: 10px;width: 280px;}
          #panel.amap-call {background-color: #009cf9;border-top-left-radius: 4px;border-top-right-radius: 4px;}
          #panel .amap-lib-driving {border-bottom-left-radius: 4px;border-bottom-right-radius: 4px;overflow: hidden;}
          table.tb {
    font-family: verdana,arial,sans-serif;
    font-size:11px;
    color:#333333;
    border-width: 1px;
    border-color: #a9c6c9;
    border-collapse: collapse;
}
          table.tb th {
    border-width: 1px;
    padding: 8px;
    border-style: solid;
    border-color: #a9c6c9;
}
          table.tb td {
    border-width: 1px;
    padding: 8px;
    border-style: solid;
    border-color: #a9c6c9;
}
          .oddrowcolor{
    background-color: #ffffff;
}
          .evenrowcolor{
    background-color: #dbdbdb;
}
          ol{list-style:none;}
          #input-bar{background-color: #ffffff;margin-top: 20px;margin-bottom: 20px;margin-left: 20px;margin-right: 20px;min-height: 700px}
      </style>
  </head>

  <body>

      <div class="warpper">

			<div class="top">
                <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
                    <a class="navbar-brand" href="#">配配</a>
                    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
                    <div class="collapse navbar-collapse" id="navbarSupportedContent">
                        <ul class="navbar-nav mr-auto">
                            <li class="nav-item active">
                                <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
                            </li>
                            <li class="nav-item dropdown">
                                <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
                                    Dropdown
                                </a>
                                <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                                    <a class="dropdown-item" href="#">Action</a>
                                    <a class="dropdown-item" href="#">Another action</a>
                                    <div class="dropdown-divider"></div>
                                    <a class="dropdown-item" href="#">Something else here</a>
                                </div>
                            </li>
                        </ul>
                        <form class="form-inline my-2 my-lg-0">
                            <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
                            <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
                        </form>
                    </div>
                </nav>
            </div>

			<div class="center" >
				<div class="left">
                    <div id = "input-bar">
                        <div class="gap"></div>
                        <h1>配送参数设置</h1>
                        <div class="gap"></div>
                        <form id = "input-values" name="input_values" method="post" action="search-post/">
                        {% csrf_token %}
                        <details class="info-set" id="CarsInfo">
                            <summary class="info-set-title">车辆信息</summary>
                            <ol>
                                <li>
                                    <div class="info-set-sub-title">
                                        车辆数是否固定
                                        <br>
                                        <input class="input-number-r" id = "input-is-stable" type="radio" value="2" name="car_stable">车辆数不固定<br>
                                        <input class="input-number-r" id = "input-is-stable" type="radio" value="1" name="car_stable" checked>车辆数固定<br>
                                    </div>
                                    <div class="info-set-sub-title">
                                        车型有几种
                                        <br>
                                        <input class="input-number-r" id = "input-car-type-num" type="radio" value="1" name="car_type" checked>一种车型<br>
                                        <input class="input-number-r" id = "input-car-type-num" type="radio" value="2" name="car_type">两种车型<br>
                                    </div>
                                    <div class="info-set-sub-title">
                                        车辆数设置
                                        <br>
                                        <div class="input-number-div">
                                            车辆数目：
                                            <br>
                                            <input class="input-number" id = "input-car-number" type="number" name="car_number" min="0" max="100" step="1">
                                        </div>
                                    </div>
                                    <div class="info-set-sub-title">
                                        载重设置（单车型默认载重一）
                                        <br>
                                        <div class="input-number-div">
                                            载重一：
                                            <br>
                                            <input class="input-number" id = "input-load-number1" type="number" name="car_load_1" min="0" max="100" step="1">
                                        </div>
                                        <div class="input-number-div">
                                            载重二：
                                            <br>
                                            <input class="input-number" id = "input-load-number2" type="number" name="car_load_2" min="0" max="100" step="1">
                                        </div>

                                    </div>
                                    <div class="info-set-sub-title">
                                        车辆速度设置
                                        <br>
                                        <div class="input-number-div">
                                            车辆速度：
                                            <br>
                                            <input class="input-number" id = "input-car-speed" type="number" name="car_speed" min="0" max="100" step="1">
                                        </div>
                                    </div>

                                </li>
                            </ol>
                        </details>
                        <div class="gap"></div>
                        <details class="info-set" id="UnloadInfo">
                            <summary class="info-set-title">卸货时间设置</summary>
                            <ol>
                                <li>
                                    <div class="info-set-sub-title">
                                        卸货时间设置
                                        <br>
                                        <div class="input-number-div">
                                            卸货时间：
                                            <br>
                                            <input class="input-number" id = "input-unload-time" type="number" name="unload_time" min="0" max="100" step="1">
                                        </div>
                                    </div>
                                </li>
                            </ol>
                        </details>
                        <div class="gap"></div>
                        <details class="info-set" id="TimeInfo">
                            <summary class="info-set-title">单次配送时长设置</summary>
                            <ol>
                                <li>
                                    <div class="info-set-sub-title">
                                        单次配送时长设置
                                        <br>
                                        <div class="input-number-div">
                                            配送时长：
                                            <br>
                                            <input class="input-number" id = "input-time-limit" type="number" name="time_limit" min="0" max="100" step="1">
                                        </div>
                                    </div>
                                </li>
                            </ol>
                        </details>
                        <div class="gap"></div>
                        <details class="info-set" id="LengthInfo">
                            <summary class="info-set-title">单次配送里程设置</summary>
                            <ol>
                                <li>
                                    <div class="info-set-sub-title">
                                        单次配送里程设置
                                        <br>
                                        <div class="input-number-div">
                                            配送里程：
                                            <br>
                                            <input class="input-number" id = "input-length-limit" type="number" name="length_limit" min="0" max="100" step="1">
                                        </div>
                                    </div>
                                </li>
                            </ol>
                        </details>
                        <div class="gap"></div>
                        <button id="start-analyze" type="submit" value="开始分析" onclick="displayDate()">开始分析</button>
                    </form>

                    </div>

                </div>
				<div class="main">

                    {% block content %}
                    <div id="map">

                        <br>
                        <table class="tb" id="tb-id1" style="margin-top: 10px;width: 900px;margin: 0 auto">
                            <tr>
                                <th nowrap="nowrap" style="text-align:center">配送中心名称</th>
                                <th nowrap="nowrap" style="text-align:center">配送中心经度</th>
                                <th nowrap="nowrap" style="text-align:center">配送中心纬度</th>
                                <th nowrap="nowrap" style="text-align:center">配送中心需求</th>
                            </tr>
                            {% for x in center %}
                            <tr>
                                    <td nowrap="nowrap" style="width: 50%;text-align:center">{{ x.name }}</td>
                                    <td nowrap="nowrap" style="text-align:center">{{ x.longitude }}</td>
                                    <td nowrap="nowrap" style="text-align:center">{{ x.latitude }}</td>
                                    <td nowrap="nowrap" style="text-align:center">{{ x.weight }}</td>
                            </tr>
                            {% endfor %}
                        </table>
                        <br><br>
                        <table class="tb" id="tb-id2" style="margin-bottom: 10px;width: 900px;margin: 0 auto">
                            <tr>
                                <th nowrap="nowrap" style="text-align:center">配送网点名称</th>
                                <th nowrap="nowrap" style="text-align:center">配送网点经度</th>
                                <th nowrap="nowrap" style="text-align:center">配送网点纬度</th>
                                <th nowrap="nowrap" style="text-align:center">配送网点需求</th>
                            </tr>
                            {% for x in dst %}
                            <tr>
                                    <td nowrap="nowrap" style="width: 50%;text-align:center">{{ x.name }}</td>
                                    <td nowrap="nowrap" style="text-align:center">{{ x.longitude }}</td>
                                    <td nowrap="nowrap" style="text-align:center">{{ x.latitude }}</td>
                                    <td nowrap="nowrap" style="text-align:center">{{ x.weight }}</td>

                            </tr>
                            {% endfor %}
                        </table>

                        <br>
                    </div>
                    {% endblock %}

                </div>
			</div>
          <div class="footer"></div>
      </div>

      <script type="text/javascript">
          function displayDate(){
              if(document.getElementById("input-car-number").value == 0){
                  alert("请输入车辆数目！")
              }
              else if(document.getElementById("input-load-number1").value == 0){
                  alert("请至少输入一种载重！")
              }
              else if(document.getElementById("input-car-speed").value == 0){
                  alert("请输入车辆速度！")
              }
              else if(document.getElementById("input-unload-time").value == 0){
                  alert("请输入卸货时间！")
              }
              else if(document.getElementById("input-time-limit").value == 0){
                  alert("请输入规定时长！")
              }
              else if(document.getElementById("input-length-limit").value == 0){
                  alert("请输入里程限制！")
              }

          }
      </script>

      <script type="text/javascript">

        var table1 = document.getElementById('tb-id1');
        var rows1 = table1.getElementsByTagName("tr");

        for(i = 0; i < rows1.length; i++){
            if(i % 2 == 0){
                rows1[i].className = "evenrowcolor";
            }else{
                rows1[i].className = "oddrowcolor";
            }
        }

        var table2 = document.getElementById('tb-id2');
        var rows2 = table2.getElementsByTagName("tr");

        for(i = 0; i < rows2.length; i++){
            if(i % 2 == 0){
                rows2[i].className = "evenrowcolor";
            }else{
                rows2[i].className = "oddrowcolor";
            }
        }

      </script>


  </body>
</html>